<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery Selector 3</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				// 后代选择器
				$('#div1 span').css('color', 'green');
				// find()方法等价于后代选择器
				$('#div1').find('span').css('font-size', '30px');
				
				// 子选择器
				// $('#div2>div>span').css('color', 'red');
				// $('#div2>#div3>span').css('color', 'red');
				// children()方法等价于自选择器
				$('#div2').children('#div3').children('span').css('color', 'blue');
				
				// next选择器, 只获取某节点后一个同级DOM对象
				$('#div1 + div').css('color', 'yellow'); // div with value 'Hello'
				// next()方法等价于next选择器
				$('#div1').next('div').css('font-size', '30px');
				
				// 获取某节点后面所有同级DOM对象
				alert($('#div1 ~ hr').length);
				// nextAll()方法等价于上面的选择器
				alert($('#div1').nextAll('hr').size());
				
				// 在find(), next(), nextAll()和children()这四个方法的运行速度优于对应的选择器, 在这四个方法中, 
				// 如果不传递参数, 就相当于传递了"*",即任何节点, 不但影响性能, 而且由于精准度不佳可能在复杂的HTML结构时产生怪异的结果
				
				// 其他操作
				// prev()/prevAll() 获取某节点前面同级DOM对象 
				// siblings() 		集成了prevAll()和nextAll()两个功能的效果 对上下相邻的所有同级DOM元素进行选定
				// nextUntil()/prevUnitl() 选定同级的下面或上面的所有节点, 选定非指定的所有元素, 一旦遇到指定的元素就停止选定

			});	
		</script>
		</head>
	<body>
		<div id="div1">
			<span>P1</span><br/>
			<span>P2</span><br/>
			<span>P3</span><br/>
		</div>
		
		<div>Hello</div>
		
		<hr/>
	
		<div id="div2">
			<span>P1</span><br/>
			<span>P2</span><br/>
			<span>P3</span><br/>
			<div id="div3">
				<span>P4</span><br/>
				<span>P5</span><br/>
				<span>P6</span><br/>		
			</div>		
		</div>
		
		<hr/>
	</body>
</html>